<template>
    <el-row :gutter="20" style="margin:10px -5px;min-height:500px" type="flex">
      <el-col style="width:280px" >
        <a-input-search style="margin-bottom: 8px" placeholder="请输入查询内容" @change="onChange" />
        <a-tree
          showLine
          @expand="onExpand"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          :treeData="gData"
          @select="this.onSelect"
        >

          <template slot="title" slot-scope="{title}">
            <span v-if="title.indexOf(searchValue) > -1">
              {{title.substr(0, title.indexOf(searchValue))}}
              <span style="color: #f50">{{searchValue}}</span>
              {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
            </span>
            <span v-else>{{title}}</span>
            <a-dropdown :trigger="['click']">
                <a-icon type="bars" style="color:#409EFF"/>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a-icon type="plus-circle" />添加子类别
                  </a-menu-item>
                  <a-menu-item>
                    <a-icon type="edit" />修改
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item>
                    <a-icon type="delete" />删除
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
          </template>
        </a-tree>
      </el-col>
      <el-col :span="18" style="border-left: #e9e9e9 solid 1px;min-height:500px">
        <el-row>
          <el-col :span="8">
            <p style="line-height:32px"><span>总公司（893）人</span></p>
          </el-col>
          <el-col :span="8">
            <el-input size="small" placeholder="请输入查询人员" v-model="input3" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button size="small" @click="handleEditOrgan">修改部门名称</el-button>
            <el-button size="small" @click="handleAddOrgan">添加子部门</el-button>
          </el-col>
          <el-col :span="24" style="margin: 15px 0 8px 0;padding: 8px;background: rgba(240,240,240,0.65)">
            <el-button size="small" type="primary" @click="handleAddUser">添加成员</el-button>
            <el-button size="small" type="primary" @click="handleAddDepart">设置所在部门</el-button>
            <el-button size="small" type="primary" @click="handleOut">离职</el-button>
          </el-col>
          
          <el-col :span="24">
            <el-table
            :data="dataList"
            border
            >
              <el-table-column
                prop="title"
                min-width="180"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="url"
                min-width="180"
                label="手机号">
              </el-table-column>
              <el-table-column
                prop="order"
                label="角色">
              </el-table-column>
              <el-table-column
                prop="order"
                label="部门">
              </el-table-column>
              <el-table-column
                prop="order"
                label="邮箱地址">
              </el-table-column>
              <el-table-column
                width="120"
                label="操作"
                align="center">
                <template slot-scope="">
                    <el-button size="mini" type="text">查看</el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-col>
        </el-row>
      </el-col>
      <organizationDialog :organizationData="organizationData"></organizationDialog>
      <userDialog :userData="userData"></userDialog>
      <departMentDialog :departData="departData"></departMentDialog>
    </el-row>
</template>
<script>
  import organizationDialog from './editOrganization'
  import userDialog from './addUser'
  import departMentDialog from './setDepartMent'
  const gData = [];

  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some(item => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };
  export default {
    data() {
      return {
        expandedKeys: [],
        searchValue: '',
        autoExpandParent: true,
        gData,
        dataList: [],
        treeList: [],
        input3: '',
        userData: {
          show: false
        },
        departData: {
          show: false
        },
        organizationData: {
          type: '',
          title: '',
          show: false,
        }
      };
    },
    methods: {
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onSelect(selectedKeys, info) { //点击菜单树节点获取当前点击的部门
        if(selectedKeys.length != 0) {
          var node = info.selectedNodes[0].data.props.dataRef //菜单数据
          console.log(node)
        } else {
          this.dataList = []
        }
      },
      onChange(e) {
        const value = e.target.value;
        const expandedKeys = this.treeList.map(item => {
            if (item.title.indexOf(value) > -1) {
              return getParentKey(item.key, this.gData);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true,
        });
      },
      handleAddMenu () { //添加菜单
        this.organizationData.show = true
      },
      handleEditOrgan () { //修改部门
        this.organizationData.title = '修改部门名称'
        this.organizationData.show = true
      },
      handleAddOrgan () { //新增子部门
        this.organizationData.title = '添加子部门'
        this.organizationData.show = true
      },
      generateList (data) { //树的搜索
        for (let i = 0; i < data.length; i++) {
          const node = data[i];
          const key = node.key;
          this.treeList.push({ key, title: node.title });
          if (node.children) {
            this.generateList(node.children, node.key);
          }
        }
      },
      handleAddUser () { //在部门上添加成员
        this.userData.show = true
      },
      handleAddDepart () { //设置所在部门
        this.departData.show = true
      },
      handleOut () { //离职
        this.$message({message:'请选择用户',type:'warning'})
      }
    },
    mounted() {
      this.gData = this.$utils.organizationData
      this.generateList(this.gData)
    },
    components: {
      organizationDialog,
      userDialog,
      departMentDialog
    }
  };
</script>
